<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>视频播放</title>
</head>

<body class="page">
  <!-- 视频容器 -->
  <div class="video-container">
    <video id="video" muted style="width: 100%; height: 100%;"></video>
    <div class="text-container">
      <div class="text-title"><span id="curPart">1</span> / <span id="sumPart">-</span></div>
      <p id="videoTitle" class="mt16">男子侧卧起做</p>
    </div>
  </div>
  <!-- 控制条 -->
  <div class="controls">
    <!-- 进度条 -->
    <div id="progress"></div>
    <i id="prevBtn" class="control-btn iconfont icon-zuo f48"></i>
    <i id="stopBtn" class="control-btn iconfont icon-zanting f48"></i>
    <i id="nextBtn" class="control-btn iconfont icon-you f48"></i>
  </div>
  <!-- 蒙层 -->
  <div id="mask">
    <div class="mask-btns">
      <div id="continueBtn" class="mask-btn"><i class="iconfont icon-arrow-"></i>继续训练</div>
      <div id="overBtn" class="mask-btn"><i class="iconfont icon-jieshu"></i>结束训练</div>
    </div>
  </div>
</body>

</html>